﻿<%@ Page Title="Using lavalamp to build ASP.NET Menu" Language="C#" MasterPageFile="~/Demo.master"
    Inherits="DemoPage" %>

<%@ Register Src="~/CodeFormatter.ascx" TagName="Code" TagPrefix="demo" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        DataBind();
    }
</script>

<asp:Content ID="Content1" ContentPlaceHolderID="DemoHolder" runat="Server">
    <div class="dna-state-help ui-corner-all" style="margin-bottom: 10px;">
        Using SimpleListView WebControl and JQueryPlugin WebControl to intergate the lavalamp
        plugin.
    </div>
    <style type="text/css">
        .lavaLampWithImage { position: relative; height: 29px; width: 421px; background: url("images/bg.gif") no-repeat top; padding: 15px; margin: 10px 0; overflow: hidden; }
        .lavaLampWithImage li { float: left; list-style: none; }
        .lavaLampWithImage li.back { background: url("images/lava.gif") no-repeat right -30px; width: 9px; height: 30px; z-index: 8; position: absolute; }
        .lavaLampWithImage li.back .left { background: url("images/lava.gif") no-repeat top left; height: 30px; margin-right: 9px; /* 7px is the width of the rounded shape */ }
        .lavaLampWithImage li a { font: bold 14px arial; text-decoration: none; color: #fff; outline: none; text-align: center; top: 7px; text-transform: uppercase; letter-spacing: 0; z-index: 10; display: block; float: left; height: 30px; position: relative; overflow: hidden; margin: auto 10px; }
        .lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited { border: none; }
        .lavaLampNoImage { position: relative; height: 29px; width: 421px; background-color: white; padding: 15px; margin: 10px 0; overflow: hidden; border: 1px solid gray; }
        .lavaLampNoImage li { float: left; list-style: none; }
        .lavaLampNoImage li.back { border: 1px solid #000; background-color: #e6e8ea; width: 9px; height: 30px; z-index: 8; position: absolute; }
        .lavaLampNoImage li a { font: bold 14px arial; text-decoration: none; color: #ffffff; outline: none; text-align: center; top: 7px; text-transform: uppercase; letter-spacing: 0; z-index: 10; display: block; float: left; height: 30px; position: relative; overflow: hidden; margin: auto 10px; }
        .lavaLampNoImage li a:hover, .lavaLampNoImage li a:active, .lavaLampNoImage li a:visited { border: none; }
        .lavaLampBottomStyle { position: relative; height: 29px; width: 421px; background-color: white; padding: 15px; margin: 10px 0; overflow: hidden; border: 1px solid gray; }
        .lavaLampBottomStyle li { float: left; list-style: none; }
        .lavaLampBottomStyle li.back { border-bottom: 5px solid blue; width: 9px; height: 30px; z-index: 8; position: absolute; }
        .lavaLampBottomStyle li a { font: bold 14px arial; text-decoration: none; color: #000; outline: none; text-align: center; top: 7px; text-transform: uppercase; letter-spacing: 0; z-index: 10; display: block; float: left; height: 30px; position: relative; overflow: hidden; margin: auto 10px; }
        .lavaLampBottomStyle li a:hover, .lavaLampBottomStyle li a:active, .lavaLampBottomStyle li a:visited { border: none; }
        .docs { clear: left; font-weight: normal; font-size: 12pt; margin: 0; padding: 0.5em 0 1em; }
    </style>
    <h3 class="docs">
        With Image</h3>
    <DotNetAge:SimpleListView ID="SimpleListView1" runat="server" CssClass="lavaLampWithImage"
        DataSourceID="XmlDataSource1">
        <ItemTemplate>
            <asp:HyperLink ID="HyperLink1" runat="server" Target="_blank" NavigateUrl='<%# Eval("NavigateUrl") %>'
                Text='<%# Eval("Text") %>'></asp:HyperLink>
        </ItemTemplate>
    </DotNetAge:SimpleListView>
    <h3 class="docs">
        No Image</h3>
    <DotNetAge:SimpleListView ID="SimpleListView2" runat="server" CssClass="lavaLampNoImage ui-state-active ui-corner-all"
        DataSourceID="XmlDataSource1">
        <ItemTemplate>
            <asp:HyperLink ID="HyperLink1" runat="server" Target="_blank" NavigateUrl='<%# Eval("NavigateUrl") %>'
                Text='<%# Eval("Text") %>'></asp:HyperLink>
        </ItemTemplate>
    </DotNetAge:SimpleListView>
    <h3 class="docs">
        Bottom Style</h3>
    <DotNetAge:SimpleListView ID="SimpleListView3" runat="server" CssClass="lavaLampBottomStyle  ui-state-active ui-corner-all"
        DataSourceID="XmlDataSource1">
        <ItemTemplate>
            <asp:HyperLink ID="HyperLink1" runat="server" Target="_blank" NavigateUrl='<%# Eval("NavigateUrl") %>'
                Text='<%# Eval("Text") %>'></asp:HyperLink>
        </ItemTemplate>
    </DotNetAge:SimpleListView>
    <DotNetAge:JQueryPlugin ID="JQueryPlugin1" runat="server" Name="lavaLamp" StartEvent="DocumentReady">
        <Target TargetIDs="SimpleListView1,SimpleListView2,SimpleListView3" />
        <PlugInScripts>
            <asp:ScriptReference Path="~/JQueryPlugin/plugins/jquery.easing.min.js" />
            <asp:ScriptReference Path="~/JQueryPlugin/plugins/jquery.lavalamp.js" />
        </PlugInScripts>
        <Options>
            <DotNetAge:JQueryOption Name="fx" Type="String" Value="backout" />
            <DotNetAge:JQueryOption Name="speed" Type="Number" Value="700" />
        </Options>
    </DotNetAge:JQueryPlugin>
    <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/JQueryPlugin/sitenodes.xml"
        XPath="nodes/node"></asp:XmlDataSource>
    <br />
    <demo:Code runat="server" ID="codeView" SourceFile="~/JQueryPlugin/Codes/Lavalamp.aspx" />
</asp:Content>
